<template>
  <div class="panels-container">
    <div class="panel-row">
      <operation-bar></operation-bar>
    </div>
    <div class="panel-row grow">
      <tool-bar
        @onCreateBaseShape="onCreateBaseShape"
        @onSelectionBtnClick="onSelectionBtnClick"
        @createSeatRow="createSeatRow"
        @createSeatMatrix="createSeatMatrix"
        @redo="redo"
        @undo="undo"
        @createPolygonShape="createPolygonShape"
      />
      <svg-canvas ref="svgCanvas"/>
      <attribute-bar :figure="selectedFigure"></attribute-bar>
    </div>
  </div>
</template>

<script>
import AttributeBar from "./components/AttributeBar";
import OperationBar from "./components/OperationBar";
import ToolBar from "./components/ToolBar";
import SvgCanvas from "./components/SvgCanvas";
import { policy, Canvas } from "@/SeatDesigner";

const { FIGURE_SELECTION, FIGURE_UNSELECTION } = Canvas.EVENTS;

const {
  PolygonPolicy,
  RowSeatPolicy,
  MatrixSeatPolicy,
  SelectionPolicy,
  RectanglePolicy,
  CirclePolicy
} = policy.canvas;

const BaseShapePolicy = {
  rectangle: new RectanglePolicy(),
  circle: new CirclePolicy()
};

export default {
  name: "SeatControl",
  components: {
    OperationBar,
    ToolBar,
    SvgCanvas,
    AttributeBar
  },
  data() {
    return {
      selectedFigure: null,
      polygonPolicy: new PolygonPolicy(),
      rowSeatPolicy: new RowSeatPolicy(),
      matrixSeatPolicy: new MatrixSeatPolicy(),
      selectionPolicy: new SelectionPolicy()
    };
  },
  mounted() {
    window.canvas = this.$refs.svgCanvas.svgCanvas;
    this.canvas = this.$refs.svgCanvas.svgCanvas;

    this.bindCanvasEvent();
  },
  methods: {
    bindCanvasEvent() {
      this.canvas.on(FIGURE_SELECTION, figures => {
        if (figures.getSize() === 1) {
          this.selectedFigure = figures.last();
        } else {
          this.selectedFigure = null;
        }
      });

      this.canvas.on(FIGURE_UNSELECTION, () => {
        this.selectedFigure = null;
      });
    },
    onCreateBaseShape(shape) {
      this.$refs.svgCanvas.svgCanvas.installPolicy(BaseShapePolicy[shape]);
    },
    createPolygonShape() {
      this.$refs.svgCanvas.svgCanvas.installPolicy(this.polygonPolicy);
    },
    createSeatRow() {
      this.$refs.svgCanvas.svgCanvas.installPolicy(this.rowSeatPolicy);
    },
    createSeatMatrix() {
      this.$refs.svgCanvas.svgCanvas.installPolicy(this.matrixSeatPolicy);
    },
    onSelectionBtnClick() {
      this.$refs.svgCanvas.svgCanvas.installPolicy(this.selectionPolicy);
    },
    redo() {
      this.canvas.commandStack.redo();
    },
    undo() {
      this.canvas.commandStack.undo();
    }
  }
};
</script>

<style scoped lang="scss">
.panels-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  .panel-row {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
  }
  .grow {
    flex: 1;
  }
}
</style>
